<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>
<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
		<title>妈咪优选</title>
		<!-- amazeui -->
		<link rel="stylesheet" type="text/css" href="${BASE_PATH}/static/ui/css/amazeui.min.css" />
		<!-- lib -->
		<link rel="stylesheet" type="text/css" href="${BASE_PATH}/static/lib/swiper/css/swiper.min.css" />
		<!-- app -->
		<link rel="stylesheet" type="text/css" href="${BASE_PATH}/static/app/css/ui.css" />
		<%-- <link rel="stylesheet" href="${BASE_PATH}/static/app/css/base.css" /> --%>
		<link rel="stylesheet" type="text/css" href="${BASE_PATH}/static/app/css/maniyouxuan.css"/>
		<link rel="stylesheet" type="text/css" href="${BASE_PATH}/static/app/css/footer.css"/>
		<style type="text/css">
			.youxuan{
				
				background: url(${BASE_PATH}/static/app/img/201804122008.png) no-repeat;
                background-size: cover;
			}
			.fenlei {
			    background: url(${BASE_PATH}/static/app/img/201805021845-2.png) no-repeat;
                background-size: cover;
			}
			.shouye{
				background: url(${BASE_PATH}/static/app/img/201805021845.png) no-repeat;
                  background-size: cover;
			} 
			body,h1,h2,h3,h4,h5,h6,ul,ol,li{margin:0;padding:0}
			body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6{-webkit-tap-highlight-color:rgba(0,0,0,0)}
			body{font:14px / 1.5 "Helvetica Neue",Helvetica,Arial,"Microsoft Yahei","Hiragino Sans GB","Heiti SC","WenQuanYi Micro Hei",sans-serif;-webkit-text-size-adjust:none; -webkit-user-select: none;}
			img{border:0;vertical-align: middle;}
			li,ol,ul{list-style-type:none;}
			h1,h2,h3,h4,h5,h6{font-weight:normal;font-size:100%;}
			a{
			  text-decoration: none;
			  color: black;
			}
			.cs{
				margin-left: -20%;
			}
		</style>
	</head>
	<body>
		<div class="content">
			<div id="recomGoodsList" class="am-g app-goods-list "></div>
		</div>
		<div data-am-widget="gotop" class="am-gotop am-gotop-fixed" >
			<a href="#top"><span class="am-gotop-title">回到顶部</span><i class="am-gotop-icon am-icon-chevron-up"></i></a>
		</div>
		<footer>
			<ul>
			<a href="${BASE_PATH}/index"><li><i class="shouye"></i>首页</li></a>
			<a href="${BASE_PATH}/goods/youxuan"><li><i class="fenlei"></i>辣妈说</li></a>
			<a href=" https://h5.youzan.com/v2/showcase/homepage?alias=1fo6ae813&sf=wx_menu"><li><i class="youxuan"></i>商城</li></a>
			<a href="${BASE_PATH}/order/list"><li><i class="dingdan"></i>订单</li></a>
			<a href="${BASE_PATH}/my"><li><i class="my"></i>我的</li></a>
		</ul>	
		</footer>
	</body>
	<!-- lib -->
		<script type="text/javascript" src="${BASE_PATH}/static/lib/jquery/jquery-1.11.2.min.js"></script>
		<!-- amazeui -->
		<script type="text/javascript" src="${BASE_PATH}/static/ui/js/amazeui.min.js"></script>
		<!-- lib -->
		<script type="text/javascript" src="${BASE_PATH}/static/lib/swiper/js/swiper.jquery.min.js"></script>
		<script type="text/javascript" src="${BASE_PATH}/static/lib/layer/layer.js"></script>
		<script type="text/javascript" src="${BASE_PATH}/static/lib/template/template.js"></script>
		<script type="text/javascript" src="${BASE_PATH}/static/lib/jquery-lazyload/jquery.lazyload.min.js"></script>
		<script type="text/javascript" src="${BASE_PATH}/static/lib/jquery-marquee/jquery.marquee.min.js"></script>
			<!-- app -->
		<script type="text/javascript" src="${BASE_PATH}/static/app/js/kit.js"></script>
	<script type="text/html" id="dataTpl">
		{{each list as goods}}
			<div class="am-u-md-4 am-u-lg-3 app-goods-item">
            <ul>
				<a href="{{goods.context }}">
					<li class="card">
						<div class="card_title"><span class="data_time">{{goods.createDate}}</span> 
							{{if goods.categoryid==1}}
						 		<span class="cs">-&nbsp; &nbsp;专题&nbsp;&nbsp; -</span>  
							{{else if goods.categoryid==2}}
								<span class="cs">-&nbsp; &nbsp;试用&nbsp;&nbsp; -</span>  
							{{else if goods.categoryid==3}}
								<span class="cs">-&nbsp; &nbsp;试用报告&nbsp;&nbsp; -</span>  
							{{/if}}
						</div>
						<img src="${FTP_PATH}{{goods.thumb}}" alt="" class="card_img" />
						<h3>{{goods.title }}</h3>
						<h5>{{goods.describe }}</h5>
					</li>
				</a>
			</ul>
            </div>
		{{/each}}
	</script>
	<script type="text/javascript">
		var width = $('.card_img').width();
		$('.card_img').height(width*(578/1190));
		
		var loading = false ,pageNum = 0, totalPage = 1;
			//加载标识，表示当前是否有请求未完成，防止同时多个请求
			$(function(){
				//绑定“加载中”进入加载事件
				Kit.util.onPageEnd(function(){
	               	if(pageNum < totalPage && !loading){
	               		loading = true;
	               		$("#recomGoodsList").append("<div class=\"app-loading\">正在加载</div>");
	                	Kit.ajax.post("${BASE_PATH}/goods/mamiList",{pageNum:pageNum+1,pageSize:10},function(result){
							$("#recomGoodsList").append(template("dataTpl",result.object));
							//amazeui要求在最后一个元素上添加am-u-end样式，否则默认为右浮动
							$(".app-goods-item","#recomGoodsList").removeClass("am-u-end").last().addClass("am-u-end");
							//图片延迟加载
							$("img.lazyload","#recomGoodsList").not(".lazyload-binded").lazyload({
								failurelimit : 100,
								effect : "show"
							}).addClass("lazyload-binded");
							$(".app-loading","#recomGoodsList").remove();
							pageNum = result.object.pageNumber;
							totalPage = result.object.totalPage;
							//重置加载标识
							loading = false;
						});
	               	}
				});
			});
	</script>
</html>
